<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>商品详情</title>
    <script src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
</head>
<body>
<p th:text="'hello  '+${user.nickname}"></p>
<table>
    <tr>
        <td>
            商品名称：
        </td>
        <td colspan="3" th:text="${goodsDetail.goodsName}">
        </td>
    </tr>
    <tr>
        <td>
            商品图片：
        </td>
        <td colspan="3">
            <image th:width="300px" th:height="400px" th:src="${goodsDetail.goodsImg}"></image>
        </td>
    </tr>
    <tr>
        <td>
            秒杀开始时间：
        </td>
        <td th:text="${#dates.format(goodsDetail.startDate,'yyyy-MM-dd HH:mm:ss')}">
        </td>
        <td id="seckillTip">
            <input type="hidden" id="secondNum" th:value="${goodsDetail.secondNum}">
            <span th:if="${goodsDetail.seckillStatus} eq 0">秒杀倒计时:
                <span id="secondNumSpan" th:text="${goodsDetail.secondNum}"></span>秒
            </span>
            <span th:if="${goodsDetail.seckillStatus} eq 2">秒杀已结束
            </span>
        </td>
        <td>
            <form action="order/submitSeckillOrder">
                <input type="hidden" name="goodsId" th:value="${goodsDetail.id}">
                <button id="seckillButton" type="submit">秒杀</button>
            </form>
        </td>
    </tr>
    <tr>
        <td>
            商品原价：
        </td>
        <td colspan="3" th:text="${goodsDetail.goodsPrice}">
        </td>
    </tr>
    <tr>
        <td>
            秒杀价：
        </td>
        <td colspan="3" th:text="${goodsDetail.seckillPrice}">
        </td>
    </tr>
    <tr>
        <td>
            库存：
        </td>
        <td colspan="3" th:text="${goodsDetail.stockCount}">
        </td>
    </tr>
</table>

<script>
    $(function () {
        countDown();
    })


    function countDown() {
        let timeout;
        let secondNum = $("#secondNum").val();
        if (secondNum > 0) {
            timeout = setTimeout(function () {
                secondNum--;
                $("#secondNum").val(secondNum);
                $("#secondNumSpan").text(secondNum);
                countDown();
            }, 1000)
            $("#seckillButton").attr("disabled", "disabled");
        } else if (secondNum == 0) {
            if (timeout) {
                clearTimeout(timeout)
            }
            $("#seckillTip").html("秒杀进行中")
            $("#seckillButton").attr("disabled", false);
        } else {
            $("#seckillTip").html("秒杀已结束")
            $("#seckillButton").attr("disabled", "disabled");
        }
    }
</script>
</body>
</html>